{include file="header.tpl"} {include file="selectArea.tpl"} {block name=body}
	<script>
		$(document).ready(function() {
			//To display the selected area
		 	 var selectedAreaName = sessionStorage.getItem("selectedAreaName");
		     document.getElementById("popId").text=selectedAreaName;
		   	//To display Login UserName
		     var selectedUserName = sessionStorage.getItem("selectedUserName");
		     document.getElementById("userNm").text=selectedUserName;
		});
	 </script>
       <table style="width: 900px; margin-left:12%">
       <tr>
       <td>
		{foreach $shop as $category}
              <li onmouseover="this.style.border='1px solid #666'" onmouseout="this.style.border='1px solid #ccc'"
                     style="margin:25px 20px 10px 0;display: inline-block; border: 1px solid #ccc; background-color: #fff; text-align: center;"
			height="200px" width="200px"><a
                     href="/Project001/phpFiles/index.php?cat={$category.category_id}&cook={$cookieVal}"> 
                     <img src="/Project001/phpFiles/images/5.jpg"
                           style="border: 1px solid #ccc; margin: 10px;" height="250px" width="250px" />
				<h4>{$category.category_name}</h4>
		</a>
              </li> 
       {/foreach}
       </td>
       </tr>
       </table>
{/block} 
{include file="footer.tpl"}
